import React from 'react';
import { Tooltip, Switch, Row, Col } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { getMessage, TextWidget } from '@inbiz/react';
import './defaultOption';

const Hover: React.FC = (props: any) => {
  const onChange = (checked: boolean) => {
    props.onChange(checked);
  };

  return (
    <div style={{ width: '100%' }}>
      <Row>
        <Col span={8}>
          <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
            <span
              style={{
                maxWidth: 'calc(100% - 18px)',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              }}
              title={getMessage(props.label)}
            >
              <TextWidget>{props.label}</TextWidget>
            </span>
            <span className="hoverIcon" style={{ marginLeft: 4 }}>
              <Tooltip title={props.tooltip}>
                <InbizIcon
                  type="icon-ic-37"
                  style={{
                    color: 'rgb(150,150,150)',
                    display: 'flex',
                    margin: '0 5px 0 0'
                  }}
                />
              </Tooltip>
            </span>
          </div>
        </Col>
        <Col span={16} style={{ display: 'flex', alignItems: 'center' }}>
          <Switch onChange={onChange} checked={props.value} />
        </Col>
      </Row>
    </div>
  );
};

export default Hover;
